<template>
  <div class="block" style="overflow:auto;height:calc(90vh);">
    <el-timeline v-infinite-scroll="load" infinite-scroll-disabled="disabled">
      <el-timeline-item
        v-for="(item,index) of list"
        :key="index"
        :timestamp="item.creationTime | parseTime('{y}-{m}-{d} {h}:{i}')"
        placement="top"
      >
        <el-card>
          <h4>{{ item.message }}</h4>
          <div class="content">
            <span class="label">IP：</span>
            <span>{{item.creationIpAddress}} -- {{item.clientAddress}}</span>
          </div>
          <div class="content">
            <span class="label">平台：</span>
            <span>{{item.systemType}}</span>
          </div>
          <div class="content">
            <span class="label">耗时：</span>
            <span>{{item.executionDuration}} mm</span>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <p class="list-loading" v-if="loading">
      <i class="el-icon-loading"></i> 加载中...
    </p>
    <p class="list-loading" v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
import { getUserLogList } from "@/api/auth/user";
import { parseTime } from "@/utils";
export default {
  props: {
    userId: Number,
    default: undefined
  },
  data() {
    return {
      total: 0,
      loading: false,
      list: [],
      listQuery: {
        userId: this.userId,
        page: 1,
        limit: 5
      }
    };
  },
  created() {
    this.getUserLogs();
  },
  computed: {
    noMore() {
      return this.list.length >= this.total;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  methods: {
    getUserLogs() {
      this.loading = true;
      getUserLogList(this.listQuery)
        .then(response => {
          this.loading = false;
          this.list = response.data.items;
          this.total = response.data.total;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    load() {
      if (this.list.length > 0) {
        this.loading = true;
        setTimeout(() => {
          this.listQuery.page += 1;
          getUserLogList(this.listQuery)
            .then(response => {
              this.loading = false;
              this.total = response.data.total;
              for (var item in response.data.items) {
                this.list.push(response.data.items[item]);
              }
            })
            .catch(error => {
              this.loading = false;
            });
        }, 2000);
      }
    }
  }
};
</script>
<style>
.list-loading {
  font-size: 12px;
  text-align: center;
}
.content{
padding-top: 10px;
}
.label{
  width: 60px;
}
</style>